<template>
    <div>
        <span>0</span>/ <span>30</span>
        <input v-lengths='30' v-model="item" type="text">
    </div>
</template>

<script>
    export default {
        data(){
            return{
                item:''
            }
        },
        directives:{
            lengths:{
                update(el,binding){
                    // console.log(this);
                    if(el.value.length>binding.value){
                        el.style.color='red'
                    }else{
                        el.style.color='black'
                    }
                    el.parentNode.querySelectorAll('span')[0].innerHTML=el.value.length
                }
            }
        }
    }
</script>

<style scoped>

</style>